Flash Of Invisible Text(FOIT)

一部のブラウザでは、custom fontの読込中は、それを必要とするtextを一時的に非表示にする

読み込まれると、textがcustom fontの見た目で表示される

この挙動がLighthouseなどのスコアに影響を与える

ブラウザが実装した機能のせいでスコアが下がるのは何か変な感じがするなmrsekut.icon

目的が異なるから仕方ないんだろうけど

用語を整理したい

custom font

system font

flash

invisible text

今は非表示にしているtext

これは、なにかボタンが押したりしたら表示されるやつ？

モーダル内の文字とか

違うっぽいmrsekut.icon

custom fontを使っている文字のことっぽい

custom fontのloadin中に消えるからinvisible textとかって呼んでるのか

回避策など

GoogleSEO:Ensure text remains visible during webfont load

に書く

#??

If you're optimizing for performance, you'll want to avoid the "flash of invisible text" and show content to users immediately using a system font (the "flash of unstyled text").ref

なぜこれが「パフォーマンス」に影響するのか？

「UXに影響する」ならわかる

それならブラウザの機能として必要なくない？